<template>
    <div class="panel">
        <div class="panel-con" :style="{ background: value.color }" v-for="(value, key) in list" :key="key">
            <div class="panel-con-title">{{ value.name }}</div>
            <div class="panel-con-number">
                <count-to :start-val="value.starVal" :end-val="value.endVal" :duration="value.duration" class="card-panel-num" />
            </div>
        </div>
    </div>
</template>

<script>
import CountTo from 'vue-count-to'

export default {
    data() {
        return {
            list: [
                { starVal: 0, endVal: 999999, duration: 4000, name: '最高可借金额', color: '#67c23a' },
                { starVal: 0, endVal: 13600, duration: 3600, name: '回报率', color: '#e6a23c' },
                { starVal: 0, endVal: 6666, duration: 2000, name: '业绩领跑', color: '#f56c6c' },
                { starVal: 0, endVal: 8888, duration: 1600, name: '安稳底薪战队', color: '#409eff' },
            ],
        }
    },
    components: {
        CountTo,
    },
    created() {},
    methods: {},
}
</script>

<style lang="less" scoped>
.panel {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .panel-con {
        width: 45%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px 0;
        .panel-con-title {
            color: #000;
            font-size: 30px;
            margin: 5px 0;
        }
        .panel-con-number {
            color: #fff;
            font-size: 30px;
            margin: 5px 0;
        }
    }
    .panel-con:nth-child(3) {
        margin: 20px 0;
    }
    .panel-con:nth-child(4) {
        margin: 20px 0;
    }
}
</style>
